<div *ngIf="!secrets" class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
  <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
</div>

<ng-container *ngIf="secrets?.length == 0">
  <bit-no-items *ngIf="trash">
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "secretsTrashNoItemsMessage" | i18n }}</ng-container>
  </bit-no-items>
  <bit-no-items *ngIf="!trash">
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "secretsNoItemsMessage" | i18n }}</ng-container>
    <button
      type="button"
      slot="button"
      bitButton
      buttonType="secondary"
      (click)="newSecretEvent.emit()"
    >
      <i class="bwi bwi-plus" aria-hidden="true"></i>
      {{ "newSecret" | i18n }}
    </button>
  </bit-no-items>
</ng-container>

<bit-table-scroll *ngIf="secrets?.length >= 1" [dataSource]="dataSource" [rowSize]="66">
  <ng-container header>
    <th bitCell class="tw-w-0">
      <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-medium !tw-text-muted">
        <input
          type="checkbox"
          (change)="$event ? toggleAll() : null"
          [checked]="selection.hasValue() && isAllSelected()"
          [indeterminate]="selection.hasValue() && !isAllSelected()"
        />
        {{ "all" | i18n }}
      </label>
    </th>
    <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
    <th bitCell bitSortable="projects" [fn]="sortProjects">{{ "project" | i18n }}</th>
    <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
    <th bitCell class="tw-w-0">
      <button
        type="button"
        bitIconButton="bwi-ellipsis-v"
        buttonType="main"
        [label]="'options' | i18n"
        [bitMenuTriggerFor]="tableMenu"
      ></button>
    </th>
  </ng-container>
  <ng-template bitRowDef let-row>
    <td bitCell>
      <input
        type="checkbox"
        (change)="$event ? selection.toggle(row.id) : null"
        [checked]="selection.isSelected(row.id)"
      />
    </td>
    <td bitCell>
      <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
        <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
        <div>
          <div *ngIf="!trash">
            <button type="button" bitLink (click)="editSecret(row)">
              {{ row.name }}
            </button>
          </div>
          <div *ngIf="trash">{{ row.name }}</div>
          <div class="tw-text-sm tw-text-muted">
            {{ row.id }}
            <button
              type="button"
              bitIconButton="bwi-clone"
              buttonType="main"
              size="small"
              [label]="'copyUuid' | i18n"
              (click)="copySecretUuidEvent.emit(row.id)"
            ></button>
          </div>
        </div>
      </div>
    </td>
    <td bitCell>
      <span
        *ngFor="let project of row.projects"
        bitBadge
        variant="secondary"
        class="tw-ml-1"
        [title]="project.name"
        maxWidthClass="tw-max-w-60"
      >
        {{ project.name }}
      </span>
      <span *ngIf="row.projects.length === 0" bitBadge variant="warning" class="tw-ml-1"
        ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
        >{{ "unassigned" | i18n }}</span
      >
    </td>
    <td bitCell class="tw-whitespace-nowrap">{{ row.revisionDate | date: "medium" }}</td>
    <td bitCell>
      <button
        type="button"
        bitIconButton="bwi-ellipsis-v"
        buttonType="main"
        [label]="'options' | i18n"
        [bitMenuTriggerFor]="secretMenu"
      ></button>
    </td>

    <bit-menu #secretMenu>
      <button type="button" bitMenuItem (click)="editSecret(row)" *ngIf="row.write && !trash">
        <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
        {{ "editSecret" | i18n }}
      </button>
      <button type="button" bitMenuItem (click)="copySecretNameEvent.emit(row.name)" *ngIf="!trash">
        <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
        {{ "copySecretName" | i18n }}
      </button>
      <button type="button" bitMenuItem (click)="copySecretValueEvent.emit(row.id)" *ngIf="!trash">
        <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
        {{ "copySecretValue" | i18n }}
      </button>
      <button type="button" bitMenuItem (click)="restoreSecretsEvent.emit([row.id])" *ngIf="trash">
        <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
        {{ "restoreSecret" | i18n }}
      </button>
      <button
        type="button"
        bitMenuItem
        *ngIf="viewEventsAllowed$ | async as allowed"
        (click)="openEventsDialog(row)"
      >
        <i class="bwi bwi-fw bwi-billing" aria-hidden="true"></i>
        <span> {{ "viewEvents" | i18n }} </span>
      </button>
      <button type="button" bitMenuItem (click)="deleteSecretsEvent.emit([row])" *ngIf="row.write">
        <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
        <span class="tw-text-danger">{{
          (trash ? "permanentlyDelete" : "deleteSecret") | i18n
        }}</span>
      </button>
    </bit-menu>
  </ng-template>
</bit-table-scroll>

<bit-menu #tableMenu>
  <button type="button" bitMenuItem (click)="bulkRestoreSecrets()" *ngIf="trash">
    <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
    <span>{{ "restoreSelected" | i18n }}</span>
  </button>
  <button type="button" bitMenuItem (click)="bulkDeleteSecrets()">
    <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
    <span class="tw-text-danger">{{ "deleteSecrets" | i18n }}</span>
  </button>
</bit-menu>
